import CodeBlock from "../../../component/CodeBlock";
import { code } from "./codeData";

function Components() {
    return (<div className="tab-pane">
        <h1>组件</h1>
        <p>组件是React应用的基本构建块。它们是可重用的、独立的UI代码片段，可以接收输入（props）并返回描述UI的React元素。</p>

        <h3>函数组件</h3>
        <p>函数组件是最简单的组件形式，它是一个返回React元素的JavaScript函数。</p>
        <CodeBlock code={code.com1}></CodeBlock>

        <h3>类组件</h3>
        <p>类组件是使用ES6类语法定义的组件，具有更多的功能，如状态管理和生命周期方法。</p>
        <CodeBlock code={code.com2}></CodeBlock>

        <h3>组合组件</h3>
        <p>组件可以在其输出中引用其他组件，这让我们可以用同一组件抽象出任意层次的细节。</p>
        <CodeBlock code={code.com3}></CodeBlock>
    </div>);
}

export default Components;